<style>
.inner-banner {
    padding: 45px 0;
    background: url(./inner-banner.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
}

.inner-banner:before {
    content: "";
    position: absolute;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.76);
}
</style>
<script setup>
import lessonApi from '@/api/lessonApi'

import bus from '@/utils/bus'
import comPPT from './ppt.vue'
import comWord from './word.vue'
import comExercise from './exercise.vue'
import comReview from './review.vue'
import comMind from './mind.vue'

const route = useRoute()
const lesson = ref({
    title: '',
    cover: '',
    intro: '',
    paperType: { title: '' },
    subject: { title: '' },
    lessons: []
})


const tabs = ref([
    {
        id: "word",
        name: '参考教案',
        comp: shallowRef(comWord)
    },
    {
        id: "ppt",
        name: '教学PPT',
        comp: shallowRef(comPPT)
    },
    {
        id: "exercise",
        name: '课后习题',
        comp: shallowRef(comExercise)
    },
    {
        id: "review",
        name: '课后反馈',
        comp: shallowRef(comReview)
    },
    {
        id: "mind",
        name: '思维拓展',
        comp: shallowRef(comMind)
    }
])
const curTab = ref('word')

onMounted(async () => {
    const lessonId = route.query.id
    const res = await lessonApi.getDetail(lessonId)
    console.log(res)
    res.questions.forEach(element => {
        element.myAns = ""
    });
    lesson.value = res
    // 告诉其他组件，我获取到了课程信息
    bus.emit('getLesson', res)
})


</script>
<template>
    <div class="container w-10/12 m-auto">
        <AppBreadCrumb :list="[
            {
                name: '首页',
                path: '/my'
            },
            {
                name: '我的课程',
                path: '/course'
            },
            {
                name: '教学单元',
                path: '/course'
            }]"></AppBreadCrumb>
    </div>
    <div class="inner-banner mb-8">
        <div class="container w-10/12 m-auto relative z-10 text-white">
            <div class="flex items-center">
                <img class="" style="width:50px;height:50px;border-radius: 50%;" alt=""
                    src="../../assets/img/course/course-10.jpg">

                <div class="ml-3">
                    <h5><a href="instructor-profile.html" class="text-lg hover-highcolor">{{ lesson.title
                            }}</a>
                    </h5>
                    <p class="text-sm">初级</p>
                </div>
            </div>
            <h2 class="my-2 text-xl">{{ lesson.title }}</h2>
            <p class="mb-4">{{ lesson.title }}</p>
            <div class="flex items-center text-sm">
                <i class="feather-database"></i><span class="mr-4">
                    知识点：{{ 28 }}个</span>
                <i class="feather-clock"></i>
                <span class="mr-4"> 建议时长：{{ lesson.duration }}分钟</span>
                <i class="feather-slack"></i><span class="mr-4"> 代码量：300行</span>
                <span>难度:</span> 简单
            </div>
        </div>
    </div>

    <div class="container w-10/12 m-auto">
        <div class="flex">
            <div class="w-9/12 mr-2">
                <AppTabs :tabs="tabs" v-model="curTab" :data="lesson"></AppTabs>
            </div>
            <div class="w-3/12 ml-2 -mt-60 z-10">
                <div class="box p-6">
                    <div>
                        <a href="https://www.youtube.com/embed/1trvO6dqQUI" class="video-thumbnail" data-fancybox="">
                            <div class="play-icon">
                                <i class="fa-solid fa-play"></i>
                            </div>
                            <img class="" src="../../assets/img/video.jpg" alt="">
                        </a>
                    </div>
                    <div class="flex items-center justify-between my-4">
                        <h4>备课视频</h4>
                        <p><span>$99.00</span> 50% off</p>
                    </div>
                    <div class="flex items-center justify-between gap-6">
                        <button class="btn-share rounded-full w-full">收藏</button>
                        <button class="btn-share rounded-full w-full">分享</button>
                    </div>
                    <div class="pt-4">
                        <button class="btn-join rounded-full w-full">进入作品</button>
                    </div>
                </div>
                <div class="box mt-4 p-4">
                    <h4 class="mb-2">单元目标</h4>
                    <ul>
                        <ol class="arrow-right m-2">目标1</ol>
                        <ol class="arrow-right m-2">目标2</ol>
                        <ol class="arrow-right m-2">目标3</ol>
                        <ol class="arrow-right m-2">目标4</ol>
                    </ul>
                </div>
                <div class="box mt-4 p-4">
                    <h4 class="mb-2">知识点</h4>
                    <ul>
                        <ol class="tag cursor-pointer">HTML</ol>
                        <ol class="tag cursor-pointer">Javascript</ol>
                        <ol class="tag cursor-pointer">css</ol>
                        <ol class="tag cursor-pointer">jQuery</ol>
                        <ol class="tag cursor-pointer">Java</ol>
                        <ol class="tag cursor-pointer">Rect</ol>
                    </ul>
                </div>

                <div class="box mt-4 p-4">
                    <h4 class="mb-2">核心指令</h4>
                    <ul>
                        <ol class="tag cursor-pointer">HTML</ol>
                        <ol class="tag cursor-pointer">Javascript</ol>
                        <ol class="tag cursor-pointer">css</ol>
                        <ol class="tag cursor-pointer">jQuery</ol>
                        <ol class="tag cursor-pointer">Java</ol>
                        <ol class="tag cursor-pointer">Rect</ol>
                    </ul>
                </div>

                <div class="box mt-4 p-4">
                    <h4 class="mb-2">教学重点</h4>
                    <ul>
                        <ol class="arrow-right m-2">目标1</ol>
                        <ol class="arrow-right m-2">目标2</ol>
                        <ol class="arrow-right m-2">目标3</ol>
                        <ol class="arrow-right m-2">目标4</ol>
                    </ul>
                </div>
                <div class="box mt-4 p-4">
                    <h4 class="mb-2">教学难点</h4>
                    <ul>
                        <ol class="arrow-right m-2">目标1</ol>
                        <ol class="arrow-right m-2">目标2</ol>
                        <ol class="arrow-right m-2">目标3</ol>
                        <ol class="arrow-right m-2">目标4</ol>
                    </ul>
                </div>
                <div class="box mt-4 p-4">
                    <h4 class="mb-2">注意事项</h4>
                    <ul>
                        <ol class="arrow-right m-2">目标1</ol>
                        <ol class="arrow-right m-2">目标2</ol>
                        <ol class="arrow-right m-2">目标3</ol>
                        <ol class="arrow-right m-2">目标4</ol>
                    </ul>
                </div>
            </div>
        </div>
    </div>

</template>
